<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <title>博客</title>
    <!--bootstrap css文件-->
    <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
    <!--jquery js文件-->
    <script src="js/jquery.min.js"></script>
    <!--bootstrap js文件-->
    <script src="bootstrap-4.2.1-dist/js/bootstrap.bundle.js"></script>
    <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
    <!--自定义css文件-->
    <link rel="stylesheet" href="css/style.css">
    <!--字体图标文件-->
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <!--灯箱插件-->
    <link rel="stylesheet" href="swipebox-master/src/css/swipebox.css">
    <script src="swipebox-master/lib/jquery-2.1.0.min.js"></script>
    <script src="swipebox-master/src/js/jquery.swipebox.js"></script>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#"><img src="images/logo.jpg" width="45"></a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarContent">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active"><a class="nav-link" href="index.html">首页</a></li>
                <li class="nav-item"><a class="nav-link" href="class.html">分类</a></li>
                <li class="nav-item"><a class="nav-link" href="blog.html">博客</a></li>
                <li class="nav-item"><a class="nav-link" href="contact.html">联系</a></li>
            </ul>

            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="搜索">
                <button type="submit" class="btn btn-outline-success my-2 my-sm-0">搜索</button>
            </form>

        </div>

    </nav>
    <!--图片区域-->

    <div id="div1">
        <ul id="ul1" class="py-3">
            <li><a href="images/002.jpg" class="swipebox" title="2008年"><img src="images/002.jpg" alt="image" class="img-fluid"></a></li>
            <li><a href="images/003.jpg" class="swipebox" title="2008年"><img src="images/003.jpg" alt="image" class="img-fluid"></a></li>
            <li><a href="images/004.jpg" class="swipebox" title="2008年"><img src="images/004.jpg" alt="image" class="img-fluid"></a></li>
            <li><a href="images/005.jpg" class="swipebox" title="2008年"><img src="images/005.jpg" alt="image" class="img-fluid"></a></li>
            <li><a href="images/006.jpg" class="swipebox" title="2008年"><img src="images/006.jpg" alt="image" class="img-fluid"></a></li>
            <li><a href="images/007.jpg" class="swipebox" title="2008年"><img src="images/007.jpg" alt="image" class="img-fluid"></a></li>
            <li><a href="images/008.jpg" class="swipebox" title="2008年"><img src="images/008.jpg" alt="image" class="img-fluid"></a></li>
            <li><a href="images/009.jpg" class="swipebox" title="2008年"><img src="images/009.jpg" alt="image" class="img-fluid"></a></li>
            <li><a href="images/010.jpg" class="swipebox" title="2008年"><img src="images/010.jpg" alt="image" class="img-fluid"></a></li>
            <li><a href="images/011.jpg" class="swipebox" title="2008年"><img src="images/011.jpg" alt="image" class="img-fluid"></a></li>
            <li><a href="images/012.jpg" class="swipebox" title="2008年"><img src="images/012.jpg" alt="image" class="img-fluid"></a></li>
            <li><a href="images/013.jpg" class="swipebox" title="2008年"><img src="images/013.jpg" alt="image" class="img-fluid"></a></li>
            <li><a href="images/014.jpg" class="swipebox" title="2008年"><img src="images/014.jpg" alt="image" class="img-fluid"></a></li>
            <li><a href="images/015.jpg" class="swipebox" title="2008年"><img src="images/015.jpg" alt="image" class="img-fluid"></a></li>
        </ul>
        <div class="btn-box text-center mb-2">
            <a href="javascript:void(0);" id="btn1" class="mr-5"><i class="fa fa-hand-o-left fa-2x"></i></a>
            <a href="javascript:void(0);" id="btn2"><i class="fa fa-hand-o-right fa-2x"></i></a>
        </div>
    </div>

</div>

<div class="container">

</div>

</body>
<script>
    window.onload = function (){
        var oDiv = document.getElementById('div1')
        var oUl = document.getElementById('ul1')
        var speed = 2
        oUl.innerHTML += oUl.innerHTML
        var oLi = document.getElementsByTagName('li')
        oUl.style.width = oLi.length * 160 + 'px'
        var oBtn1 = document.getElementById('btn1')
        var oBtn2 = document.getElementById('btn2')

        function move(){
            if(oUl.offsetLeft <- (oUl.offsetWidth / 2)){
                oUl.style.left = 0
            }
            if(oUl.offsetLeft > 0){
                oUl.style.left = -(oUl.offsetWidth / 2) + 'px'
            }
            oUl.style.left = oUl.offsetLeft + speed + 'px'
        }
        oBtn1.addEventListener('click',function (){
            speed = -2
        },false)
        oBtn2.addEventListener('click',function (){
            speed = 2
        },false)
        var timer = setInterval(move,30)
    }

    jQuery(function ($){
        $(".swipebox").swipebox({
            useCSS: true,
            useSVG: true,
            initialIndexOnArray: 0,
            hideCloseButtonOnMobile: false,
            removeBarsOnMobile: true,
            hideBarsDelay: 3000,
            loopAtEnd: false
        })
    })

</script>
</html>